<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <base th:href="${#request.getContextPath()+'/'}">


</head>
<body>


<!-- 初始化分页导航条 -->
<div th:fragment="pageDivShow">

    <!-- 这个div用来显示分页导航条的-->
    <div id="pageDiv"></div>

    <!-- 添加样式和js的文件-->
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
    <script src="layui/layui.js"></script>

    <script th:inline="javascript">
        var cout = [[${page.total}]];
        var pageNum = [[${page.current}]];
        var limit = [[${page.size}]];
        var url = [[${url}]];
    </script>

    <script>

        // 初始化分页导航条
        layui.use('laypage', function(){

            // laypage代表的前端分页对象
            var laypage = layui.laypage;

            //执行一个laypage实例
            laypage.render({
                elem: 'pageDiv' // 存放分页导航条的容器id
                ,count: cout // 条数
                ,layout: [ 'prev', 'page', 'next', 'limit','count'] // 局部
                ,limit: limit  // 每页显示的条数
                ,curr:pageNum // 当前页
                ,limits:[5,10,20,30]
                ,jump: function(obj, first){
                    //首次不执行
                    if(!first){
                        //do something
                        // 查询下一页的数据
                        location.href = url+"?current="+obj.curr+"&size="+obj.limit;
                    }
                }
            });
        });
    </script>

</div>
</body>
</html>